<template>
    <div class="high-table">
        <div class="search-wrapper">
            <el-form :model="formModel" label-width="80px">
                <el-row :gutter="10">
                    <el-col v-for="item in searchCols" :key="item.prop" :xs="24" :sm="12" :md="8">
                        <el-form-item :label="item.label">
                            <component
                                :is="getComponent(item.formType)"
                                v-model="formModel[item.prop]"
                                :options="item.options"
                            >
                            </component>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item>
                            <el-button type="primary" @click="submitSearch">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-table :data="dataList">
            <el-table-column
                v-for="col in columns"
                :key="col.prop"
                :prop="col.prop"
                :label="col.label"
                :width="col.width"
            >
                <template #default="scope">
                    <slot name="cell" :row="scope.row" :col="col"></slot>
                    <slot>
                        <span>{{ scope.row[col.prop] }}</span>
                    </slot>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
            <el-pagination
                layout="total, prev, pager, next"
                :total="pagination.total"
                :page-size="pagination.pageSize"
                @current-change="pageChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, unref, computed } from 'vue';
import Input from './components/Input/index.vue';
import Select from './components/Select/index.vue';

const props = defineProps<{
    dataList: any[];
    columns: HighTableColumn[];
    pagination: {
        pageSize?: number;
        pageNo?: number;
        total: number;
    };
}>();

const emit = defineEmits<{
    (e: 'page-change', no: number): void;
    (e: 'submit-search', values: any): void;
}>();

const searchCols = computed(() => {
    if (!Array.isArray(props.columns)) {
        return;
    }

    return props.columns.filter((item) => !item.hideInSearch);
});

const getComponent = (formType: HighTableFormType) => {
    switch (formType) {
        case 'input':
            return Input;
        case 'select':
            return Select;
        default:
            const extreme: never = formType;
            break;
    }
};

const formModel = ref<any>({});

const pageChange = (pageNo) => {
    emit('page-change', pageNo);
};

const submitSearch = () => {
    emit('submit-search', formModel.value);
};
</script>

<style lang="scss">
.high-table {
    .search-wrapper {
        border-bottom: 1px solid rgb(235, 238, 245);
        margin-bottom: 16px;
    }
    .pagination-wrapper {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>
